<template>
	<view>

		<swiper style="height: 100vh;" :current="swiperIndex" @change="ChangeSwiper">
			<swiper-item v-for="(item,index) in ask" :key="index">
				<scroll-view scroll-y="true" style="height: 100vh;">
					<view style="margin: 20rpx 40rpx;">
						<view class="" style="position: relative;">
							<view style="position: absolute;top: 0;display: flex;align-items: center;">
								<text
									class="block">{{item.type==1?'单选题':item.type==2?'多选题':item.type==3?'判断':''}}</text>
								<text class="u-font-weight u-font-32">{{index+1}}.</text>
							</view>
							<view :style="{textIndent:swiperIndex>8?'160rpx':'140rpx'}" class="u-font-weight u-font-32">
								<u-parse :html='item.title' style=''></u-parse>
							</view>
						</view>
						<image :src="item.image" mode="widthFix" style="width: 100%;margin-top: 20rpx;" v-if="item.image"></image>
						<view @click="Cask(item1,index1)" v-for="(item1,index1) in item.options" :key="index1"
							class="u-flex u-margin-top-20">
							<view class="u-margin-right-20">
								<u-icon name="checkmark-circle-fill" color="#38A5FD" size="60" v-if="item1.isReal==1">
								</u-icon>
								<u-icon name="close-circle-fill" color="#FF6B6B" size="60" v-if="item1.isReal==2">
								</u-icon>
								<view class="xuhao" v-if="!item1.isReal" :class="item1.isChange?'change':''">
									{{item1.sort}}
								</view>
							</view>
							<view>{{item1.content}}</view>
						</view>
						<view class="u-flex u-margin-top-20" v-if="isControls">
							<view class="controls" @click="controls(1,item.isjiqiao=true)"
								:style="{border:controlIndex==1?'1rpx solid #38A5FD':'1rpx solid #333'}">
								<image :src="controlIndex==1?'/static/ask_s_1.png':'/static/ask_1.png'"
									style="width: 25rpx;height: 36rpx;"></image>
								<text class="u-margin-left-20"
									:style="{color:controlIndex==1?'#38A5FD':'#333'}">技巧</text>
							</view>
							<view class="controls" @click="controls(2)"
								:style="{border:controlIndex==2?'1rpx solid #38A5FD':'1rpx solid #333'}">
								<image :src="controlIndex==2?'/static/ask_s_2.png':'/static/ask_2.png'"
									style="width: 32rpx;height: 32rpx;"></image>
								<text class="u-margin-left-20"
									:style="{color:controlIndex==2?'#38A5FD':'#333'}">语音</text>
							</view>
							<view class="controls" @click="controls(3)"
								:style="{border:controlIndex==3?'1rpx solid #38A5FD':'1rpx solid #333'}">
								<image :src="controlIndex==3?'/static/ask_s_3.png':'/static/ask_3.png'"
									style="width: 32rpx;height: 28rpx;"></image>
								<text class="u-margin-left-20"
									:style="{color:controlIndex==3?'#38A5FD':'#333'}">视频</text>
							</view>
							<view class="controls" @click="isNext=!isNext"
								:style="{border:isNext?'1rpx solid #38A5FD':'1rpx solid #333'}">
								<u-icon name="reload" :color="isNext?'#38A5FD':'#333'"></u-icon>
								<text class="u-margin-left-20" :style="{color:isNext?'#38A5FD':'#333'}">自动</text>
							</view>
						</view>
						
						

						<view style="width: 500rpx;margin:40rpx auto;">
							<u-button type="primary " @click="tijiao" v-if="!item.isRead && item.type==2">提交</u-button>
						</view>


						<view v-if=" item.isjiqiao" class="u-margin-bottom-20 u-font-weight ">
							<u-parse :html='item.parse' style=''></u-parse>
						</view>


						<view v-if=" controlIndex==3" class="u-margin-bottom-20 u-font-weight ">
							<video :src="item.video" style="width: 100%;height: 300rpx;"></video>
						</view>


						<view class="u-padding-20" style="background: #F7F8FC;margin: auto;" v-if="item.resultInfo">
							答案:<text class="u-type-success u-margin-right-20">{{item.resultInfo.answerStr}}</text>
							您选择：<text class="u-type-error">{{item.resultInfo.result}}</text>
						</view>

						<view v-if="item.resultInfo" class="u-margin-top-20 u-type-info-dark">
							标准答案:{{item.resultInfo.answer}}
						</view>
						
						


					</view>


					<view class="timeLong" v-if="type=='模拟考试'">
						<u-count-down :timestamp="timeLong" color="#38A5FD" bg-color="#f1f1f1" @end="timeEnd">
						</u-count-down>
					</view>


				</scroll-view>
			</swiper-item>
		</swiper>


		<view class="bottomCntrols">
			<view @click="swiperIndex+1<=1?1:swiperIndex--">上一题</view>
			<view class="u-flex">
				<u-icon name="checkmark-circle-fill" size="40" color="#38A5FD"></u-icon>
				<text class="u-margin-right-20 u-margin-left-20" style="color: #38A5FD;">{{correctNum}}</text>
				<u-icon name="close-circle-fill" size="40" color="#FF6B6B"></u-icon>
				<text class="u-margin-right-20 u-margin-left-20" style="color: #FF6B6B;">{{mistakeNum}}</text>
			</view>
			<view class="u-flex">
				<u-icon name="grid" size="40" color="#333"></u-icon>
				<text class="u-margin-right-20 u-margin-left-20" style="color: #38A5FD;">
					{{swiperIndex+1}}/ <text style="color: #333;">{{index || ask.length}}</text>
				</text>
			</view>
			<view @click="swiperIndex>=ask.length-1?ask.length:swiperIndex++">下一题</view>
		</view>


		<w-vip ref='vip'></w-vip>

	</view>
</template>

<script>
	export default {
		name: "w-List",
		data() {
			return {
				isNext: false,
				controlIndex: '',
				swiperIndex: 0,
				correctNum: 0,
				mistakeNum: 0,
				info: {},
				ask: [],
				resultInfo: '',
				AUDIO: ""
			}
		},
		props: {
			index: {
				type: [Number, String],
				default: ''
			},
			cate_id: {
				type: [Boolean, String],
				default: ''
			},
			isControls: {
				type: [Boolean, String],
				default: ''
			},
			type: {
				type: [Boolean, String],
				default: ''
			},
			timeLong: {
				type: [Number, String],
				default: ''
			}
		},
		watch: {
			checkAskObject: {
				immediate: true,
				handler(v) {
					if(v.ask){
						if(this.type=='顺序练习' || this.type=='随机练习'){
							if(v.swiperIndex+1==v.ask.length  ){
								this.$emit('jiazai')
							}
						}
					}
					if (this.type == '错题查看') {
						if (v.ask.length) {
							let askObject = v.ask[v.swiperIndex];
							let result = v.ask[v.swiperIndex].resultArr;
							let answers = v.ask[v.swiperIndex].answerArr;
							answers.forEach(item1 => {
								askObject.options.filter(item => item.sort == item1)[0].isReal = 1; //找出正确答案 
							})
							result.forEach(item1 => {
								var arr = askObject.options.filter(item => item.sort == item1)[0];
								if (!arr.isReal) {
									arr.isReal = 2
								}
							})
							// 添加答案
							askObject.resultInfo = askObject;
							askObject.jiqiao = true;

							askObject.isRead = true;
							this.$forceUpdate()
						}
					}
				}
			}
		},
		computed: {
			checkAskObject() {
				return {
					swiperIndex: this.swiperIndex,
					ask: this.ask
				}
			}
		},
		methods: {
			next() {
				let checkAskObject = this.checkAskObject;
				if (checkAskObject.ask.length > checkAskObject.swiperIndex + 1 && this.isNext) {
					this.swiperIndex++
				}
			},
			//模拟考试倒计时
			timeEnd() {
				this.$emit('timeEnd')
			},
			userInfo() {
				return new Promise((resolve, reject) => {
					this.$u.post('/user/information', {}).then(res => {
						resolve(res)
					}).catch(err => {

					})
				})
			},
			//是否提示
			async controls(e) {
				let userInfo = await this.userInfo();
				if (!userInfo.vipId) {
					this.$refs.vip.VipShow = true;
				} else {

					let askObject = this.ask[this.swiperIndex];
					if (e == 1) {
						if (userInfo.vipId >= 1) {
							this.audio(askObject.parseAudio, this.controlIndex, e)
						} else {
							this.$refs.vip.VipShow = true;
						}
						return
					}

					if (e == 2) {
						if (userInfo.vipId >= 1) {
							this.audio(askObject.titleAudio, this.controlIndex, e)
						} else {
							this.$refs.vip.VipShow = true;
						}
						return
					}
					if (e == 3) {
						if (userInfo.vipId > 1) {
							if (this.controlIndex) {
								this.controlIndex = '';
							} else {
								this.controlIndex = e;
							}
						} else {
							this.$refs.vip.VipShow = true;
						}
					}
				}
			},

			audio(Audio, ing, index) {
				if (ing) {
					this.AUDIO.stop();
					this.controlIndex = ''
					return;
				}
				this.AUDIO = uni.createInnerAudioContext();
				this.AUDIO.src = Audio;
				this.controlIndex = index;
				this.AUDIO.play();
				this.AUDIO.onCanplay(() => {
					let duration = this.AUDIO.duration * 1000;
					setTimeout(() => {
						this.controlIndex = ''
					}, duration);
				})
			},

			ChangeSwiper(e) {
				this.swiperIndex = e.detail.current;

			},

			Cask(item, index) {
				let askObject = this.ask[this.swiperIndex];
				// 已读
				if (askObject.isRead) return;
				// 高亮
				this.$set(item, "isChange", !item.isChange);
				// 已选答案
				let result = askObject.options.filter(item => item.isChange).map(item1 => {
					return item1.sort
				});
				if (askObject.type == 1 || askObject.type == 3) {
					this.sure(result)
				}
			},
			// 多选提交
			tijiao() {
				let result = this.ask[this.swiperIndex].options.filter(item => item.isChange).map(item1 => {
					return item1.sort
				});
				this.sure(result)
			},
			sure(result) {
				let askObject = this.ask[this.swiperIndex];
				console.log(askObject, "askObject")
				this.$u.post('/user/answer', {
					type: this.type == '顺序练习' ? 0 : this.type == '模拟考试' ? 1 : 2,
					id: askObject.id,
					options: askObject.options,
					result: result.join(','),
					exercise_num: this.swiperIndex,
					cate_id: this.cate_id
				}).then(res => {
					let answers = res.answers;
					if (!res.pass) {
						//如果答错
						answers.forEach(item1 => {
							askObject.options.filter(item => item.sort == item1)[0].isReal = 1; //找出正确答案 
						})
						result.forEach(item1 => {
							var arr = askObject.options.filter(item => item.sort == item1)[0];
							if (!arr.isReal) {
								arr.isReal = 2
							}
						})
						this.mistakeNum++
					} else {
						// 如果答对了
						askObject.options.filter(item => item.sort == result)[0].isReal = 1;
						this.correctNum++
					};
					// 添加答案
					askObject.resultInfo = res;
					this.$nextTick(() => {
						askObject.isRead = true;
					})
					this.next()
					this.$forceUpdate()
				}).catch(err => {

				})
			}
		},
		destroyed() {

			this.AUDIO = '';
		}
	}
</script>

<style scoped>
	.xuhao {
		width: 50rpx;
		height: 50rpx;
		border: 1rpx solid #757575;
		text-align: center;
		line-height: 50rpx;
		border-radius: 100%;
		margin: 6rpx;

	}

	.change {
		background: #007AFF;
		color: #fff;
		border: 1rpx solid #007AFF;
	}

	.bottomCntrols {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		z-index: 999;
		width: 750rpx;
		border-top: 1rpx solid #F1F1F1;
		background: #fff;
	}

	.block {
		height: 45rpx;
		line-height: 45rpx;
		min-width: 80rpx;
		text-align: center;
		background: #38A5FD;
		color: #fff;
		font-size: 24rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		display: inline-block;
	}

	.controls {

		border-radius: 10rpx;
		border: 1rpx solid #333333;
		text-align: center;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 15rpx;
	}

	.timeLong {
		position: fixed;
		transform: translate(-50%);
		left: 50%;
		bottom: 200rpx;
		background: #F1F1F1;
		padding: 20rpx;
		width: 680rpx;
		text-align: center;
	}
</style>
